@use '../variables';
@use '../mixins';

@keyframes #{variables.$prefix}wave-wave {
  0% {
    box-shadow: 0 0 0 0 currentcolor;
  }

  100% {
    box-shadow: 0 0 0 6px currentcolor;
  }
}

@keyframes #{variables.$prefix}wave-fade-out {
  0% {
    opacity: 0.2;
  }

  100% {
    opacity: 0;
  }
}

@include mixins.b(wave) {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  border-radius: inherit;
  animation:
    #{variables.$prefix}wave-wave 0.4s cubic-bezier(0.08, 0.82, 0.17, 1),
    #{variables.$prefix}wave-fade-out 2s cubic-bezier(0.08, 0.82, 0.17, 1);
  animation-fill-mode: both;
}
